```svelte
<script lang="ts">
  import * as pinInput from "@zag-js/pin-input"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(pinInput.machine, { id })
  const api = $derived(pinInput.connect(service, normalizeProps))
</script>

<div>
  <div {...api.getRootProps()}>
    <input {...api.getInputProps({ index: 0 })} />
    <input {...api.getInputProps({ index: 1 })} />
    <input {...api.getInputProps({ index: 2 })} />
  </div>
  <button onclick={api.clearValue}>Clear</button>
</div>
```
